<template>
	<div class="commonGameRecordList" v-for="(item,index) in data" @click="communityClick(item)">
		<div class="common-rect-list-right">
			<h3>{{item.game_type === 1?'五子棋大战':''}} <strong>{{item.create_time}}</strong> </h3>
			<div class="common-rect-list-right-center">
				<div class="common-rect-list-right-left">
					<span class="common-rect-list-right-left">
						<img v-if="store.state?.userInfoX?.avatar" :src="store.state?.userInfoX?.avatar?store.state?.userInfoX?.avatar:require('../assets/image/icon-defalut.png')" @error="(e)=>{e.target.src = require('../assets/image/icon-defalut.png')}" @click="communityClick(item)" >
					</span>
					<p>{{store.state?.userInfoX?.nickName}}</p>
				</div>
				<div class="common-rect-list-right-center">
					<i>VS</i>
					<strong :style="{color:item.win === 1?'#f9ab08':'rgb(99, 109, 126)'}">{{item.win === 1?'赢':'输'}}</strong>
				</div>
				<div class="common-rect-list-right-right">
					<span class="common-rect-list-right-right">
						<img v-if="item.avatar" :src="item.avatar?item.avatar:require('../assets/image/icon-defalut.png')" @error="(e)=>{e.target.src = require('../assets/image/icon-defalut.png')}" @click="communityClick(item)" >
					</span>
					<p>{{item.nickName}}</p>
				</div>
			</div>
			<!-- <span class="common-rect-list-right-time">{{item.create_time}}</span> -->
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {
		ref,
		inject
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter();
	const store = inject('store')
	const emits = defineEmits(['delete'])
	const props = defineProps({
		data: Array,
		deleteShow: Boolean
	})
	
	const communityClick = (item) => {
		router.push({
			path: '/gobangRecord',
			query: {
				item:JSON.stringify(item)
			}
		})
	}
	
</script>

<style lang="scss">
	.commonGameRecordList{
		width: 98%;
		background: white;
		border-radius: 5px;
		padding: 10px  0;
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20px;
		cursor: pointer;
		box-sizing: border-box;
		position: relative;
		&:after{
			content: "";
			position:absolute;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 1px;
			background-image: linear-gradient(to right,rgba(145,149,160,0.1),rgba(145,149,160,0.2),rgba(145,149,160,0.1));
		}
		img{
			width: 60px;
			height: 60px;
			border-radius: 5px;
			margin-right: 10px;
			object-fit: cover;
		}
		.common-rect-list-right{
			width: calc(100%);
			height: 100%;
			position: relative;
			h3{
				font-size: 13px;
				color: var(--main-font-color);
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				margin: 0;
				margin-bottom: 10px;
				    font-family: cursive;
				strong{
					font-size: 12px;
					color: rgb(99, 109, 126);
					margin-left: 1px;
				}
			}
			p{
				margin: 0;
			}
			.common-rect-list-right-center{
				display: flex;
				justify-content: space-between;
				span{
					width: 30px;
					height: 30px;
					overflow: hidden;
					border-radius: 60%;
					display: inline-block;
					margin: auto;
					display: block;
					margin-bottom: 7px;
				}
				p{
					text-align: center;
				}
				.common-rect-list-right-center{
					display: flex;
					justify-content: center;
					flex-direction: column;
					i{
						font-size: 20px;
						font-weight: bold;
					}
					strong{
						font-size: 16px;
						text-align: center;
						    font-family: cursive;
					}
				}
			}
			
			.common-rect-list-right-dec{
				font-size: 14px;
				color: #60616c;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				margin: 0;
				line-height: 20px;
			}
			.common-rect-list-right-time{
				font-size: 12px;
				color: #9094a0;
				position: absolute;
				bottom: 0;
				left: 0;
			}
			.common-rect-list-right-look{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				img{
					width: 18px;
					height: 18px;
					margin-right: 3px;
				}
				font-size: 13px;
				color: #9094a0;
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
	}
</style>
